<template>
	<view class="lay-c-c-col" style="height: 100%; width: 100%;">
		<view class="summary lay-c-c-col pd-t-xxl">
			<view class="hspace-xxl" style="height: 150rpx;"></view>
			<view class="text-sm pd-b-md text-bold">基本账户</view>
			<view class="text-xxxl pd-md text-bold">{{balance}}</view>
			<view class="lay-c-c pd-lg" style="width:100%">
				<view class="lay-c-c-col flex1">
					<view class="text-sm pd-md grey">可用余额</view>
					<view class="text-xl">{{available_balance}}</view>
				</view>
				<view class="lay-c-c-col flex1" style="border-left: 0.5px solid rgba(255,255,255,0.3)">
					<view class="text-sm pd-md grey">不可用余额</view>
					<view class="text-xl">{{unavailable_balance}}</view>
				</view>
			</view>
		</view>
		<view class="lay-c-c mg-t-xxl mg-b-xxl flex1">
			<view class="bk-green white radius2 lay-c-c" style="width:400rpx; height:100rpx;" @click="doShowModal">提现</view>
		</view>
		<view class="lay-c-c pd-xxl">
			<view class="lay-c-c green">
				<view class="pd-lg" @click="goBillsPage"><text>资金明细</text></view>
				<view class="pd-xxs"><text class="solid-left line-gray hspace-xs"></text></view>
				<!--
				<view class="pd-lg"><text>提现管理</text></view>
				<view class="pd-xxs"><text class="solid-left line-gray hspace-xs"></text></view>
				-->
				<view class="pd-lg" @click="goExtractListPage"><text>提现记录</text></view>
			</view>
		</view>

		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view style="display: flex;justify-content: center; align-items: center; margin: 50rpx 0rpx; font-size: large; font-weight: bold;">
					<text>提现</text>
				</view>
				<view>
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 30rpx 0rpx;">
						<view style="width:150upx">金额：</view>
						<input style="width:400upx" type="number" v-model="input_money" :placeholder="'最大可提'+can_extract"></input>
					</view>
					
					<view style="display: flex; justify-content: space-around; align-items: center; margin: 50rpx 0rpx;">
						<button style="width: 200rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;" @click="onCancel">取消</button>
						<button style="width: 200rpx; padding: 10rpx 0rpx; background-color: #E93323; color: white;" @click="onOK">确定</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	import {
	  getMerBalance, merExtractApply
	} from "@/api/fsh.js";
	
	export default {
		data() {
			return {
				balance: '',
				available_balance: '',
				unavailable_balance: '',
				can_extract: 0,

				showModal: false,
				input_money: '',
			}
		},
		onLoad(options) {
			this.merId = options.merId;
			this.getMerBalance();
		},
		methods: {
			getMerBalance: function() {
				getMerBalance(this.merId, 1).then(res=>{
					this.balance = res.entity.balance;
					this.available_balance = res.entity.available_balance;
					this.unavailable_balance = res.entity.unavailable_balance;
					this.can_extract = this.available_balance;
				}).catch(err=>{
					console.error("getMerBalance fail:", err)
				})
			},
			
			goBillsPage() {
				uni.navigateTo({
					url: `./account_bills?merId=${this.merId}`
				})
			},
			
			goExtractListPage() {
				uni.navigateTo({
					url: `./common_table?pageType=1&merId=${this.merId}`
				})
			},

			doShowModal: function() {
				this.showModal = true;
			},
			onCancel: function() {
				this.showModal = false;
			},
			onOK: function() {
				this.showModal = false;
				
				if(this.input_money < 0.01) {
					return this.$util.Tips({
						title: '请输入金额'
					});
				}
				
				if(this.input_money > this.can_extract) {
					return this.$util.Tips({
						title: '超过最大可提金额'+this.can_extract
					});
				}
				
				merExtractApply(this.merId, this.input_money).then(res=>{
					this.getMerBalance()
					uni.showModal({
						title: res.msg
					})
				}).catch(err=>{
					uni.showModal({
						title: err.msg
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "@/leui.scss";
	
	page {
		height: 100vh;
		width: 100%;
	}
	
	.summary {
		width: 100%;
	}
</style>
